<template>
  <div class="page-cell">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
      <li v-for="item in list">
        <mt-cell :title="item.day" :label="item.bhTime" :to="item.bhLink" is-link>
          <label v-if="item.hasRead" class="font-success">已读&nbsp;&nbsp;</label>
          <label v-else class="font-danger">未读&nbsp;&nbsp;</label>
          <label v-if="item.hasReturn" class="font-success">已回复&nbsp;&nbsp;</label>
          <label v-else class="font-danger">未回复&nbsp;&nbsp;</label>
        </mt-cell>
      </li>
    </ul>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {bhlist,ajax} from '../../data/wap-service'
  import { InfiniteScroll } from 'mint-ui';

  Vue.use(InfiniteScroll);

  export default {
    name: 'app',
    data(){
      return {
        list:[],
        page:1,
        hasNext:true
      }
    },
    mixins:[ajax],
    created(){
      this.loadMore();
    },
    methods:{
      loadMore(){
        if (!this.hasNext) {
          this.error("没有更多了~");
          return;
        }
        this.loading=true;
        this.doajax(bhlist,{"page":this.page},(resp) => {
            this.list=this.list.concat(resp.bhs);
            this.hasNext=resp.hasNext;
            this.page++;
        });
        this.loading=false;
      }
    }
  }
</script>
<style>
  ul{
    padding: 0;
  }
  ul li{
    list-style-type:none;
  }
</style>
